<template>
  <span class="tree-node-indicator" @click="handleToggle">
    <!-- 有子节点时显示展开/折叠图标 -->
    <template v-if="hasChildren">
      <CaretRightOutlined 
        v-if="!isExpanded" 
        class="expand-icon collapsed"
        :class="{ 'has-children': hasChildren }"
      />
      <CaretDownOutlined 
        v-else 
        class="expand-icon expanded"
        :class="{ 'has-children': hasChildren }"
      />
    </template>
    <!-- 叶子节点显示占位符保持对齐 -->
    <span v-else class="leaf-placeholder"></span>
  </span>
</template>

<script setup lang="ts">
import { CaretRightOutlined, CaretDownOutlined } from '@ant-design/icons-vue';

// 组件属性定义
interface Props {
  hasChildren: boolean;    // 是否有子节点
  isExpanded: boolean;     // 是否已展开
}

// 组件事件定义
interface Emits {
  (e: 'toggle'): void;     // 切换展开/折叠状态
}

// 定义props和emits
const props = defineProps<Props>();
const emit = defineEmits<Emits>();

// 处理点击切换
function handleToggle() {
  // 只有有子节点的情况下才能切换
  if (props.hasChildren) {
    emit('toggle');
  }
}
</script>

<style scoped>
.tree-node-indicator {
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: middle;
}

.expand-icon {
  font-size: 12px;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  color: #666;
  
  &.has-children {
    color: #1890ff;
    
    &:hover {
      color: #40a9ff;
      transform: scale(1.1);
    }
  }
  
  &.collapsed {
    transform: rotate(0deg);
  }
  
  &.expanded {
    transform: rotate(0deg);
  }
}

.leaf-placeholder {
  display: inline-block;
  width: 16px;
  height: 16px;
}

/* 添加点击反馈动画 */
.expand-icon:active {
  transform: scale(0.95);
}

/* 确保图标垂直居中对齐 */
.tree-node-indicator {
  line-height: 1;
  text-align: center;
}
</style>